// 混入  mixints   方便业务的开发，拓展，和修改   将对象暴露出去
export default {

    data() {
        return {
            // 密码显示隐藏 
          ispwd: true,
            // 双向数据绑定   
          ruleForm: {
              username: '',
              password: ''
          },
            // 表单校验
          rules: {
             //  用户名
              username: [
                { required: true, message: '请输入账户名称', trigger: 'blur' },
                { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
              ],
              // 密码
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
              ],
          }
        };
      },
      methods: {
         // 清空表单内容  
          remove() {
              this.$refs.ruleFormref.resetFields()
          },
        // 实现登录功能
          login() {
            // 首先校验用户填写的内容是否规范 根据引用信息 validate
            this.$refs.ruleFormref.validate(async valid => {
                if(!valid) return this.$message.error('请填写完整的登录信息')
                // 发送ajax请求
                const {data: res} = await this.$http.post('/login', this.ruleForm)
                console.log(res)
                if(res.meta.status !== 200) return this.$message.error('登录失败')
                this.$message.success('登录成功')
                // 登录成功后，跳转到组件home页面
                this.$router.push('/home')

            })
            
          }
      }
}